<template>
  <v-app>
    <v-app-bar
      app
      color="white"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <div class="avatar" v-if="user">
        <v-avatar color="indigo" class="soft" @click="showinfoDialog = true">
          <v-icon dark>
            mdi-account-circle
          </v-icon>
        </v-avatar>
      </div>
    </v-app-bar>
    <UserInfoDialog v-model="showinfoDialog" />
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

import UserInfoDialog from "./components/UserInfoDialog";
import {mapState} from "vuex";
export default {
  name: 'App',
  components: {UserInfoDialog},
  data: () => ({
    //
    showinfoDialog: false
  }),
  computed:{
    ...mapState(['user'])
  }
};
</script>

<style scoped lang="scss">
    .v-sheet.v-app-bar.v-toolbar:not(.v-sheet--outlined){
      display: inline-block;
      background: #ffffff;
      border-radius: 0 0 20px 20px;
      box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
    }
</style>

<style lang="scss">
  .icon {
    width: 1em; height: 1em;
    transform: scale(2);
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  body,#app{
    background-color: #ecf0f3;
  }

  .v-menu__content{
    background: #fff !important;
    border-radius: 20px !important;
  }

  .v-overlay.v-overlay--active{
    .v-overlay__scrim{
      opacity: 1 !important;
      background: white !important;
    }
  }
  .v-dialog__content{
    .v-dialog.v-dialog--active{
      border-radius: 20px !important;
      box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff !important;
      border: 1px solid #f3f3f3 !important;
    }
  }

  .v-main__wrap{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .soft-box{
    display: inline-block;
    padding: 1rem;
    background: #ecf0f3;
    border-radius: 20px;
    box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
    border: 1px solid #f3f3f3;
  }
  .soft{
    background: #ecf0f3;
    border-radius: 20px;
    box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
    border: 1px solid #f3f3f3;
  }
</style>
